@import '../../style/index.less';

@time: 500ms;
@pageLevel1: 1;
@pageLevel2: 2;


.layouts {
  position: relative;
  height: 100%;
  background-color: @style-background-color;
  color: @style-color;
  .router-view {
    height: calc(100% - 45px);
    padding: 0 10px;
    background-color: black;
    overflow: hidden;
  }
  // .am-tabs-default-bar-content, .am-tabs-default-bar-tab {
  //   background-color: #000;
  // }
}


// 注意
// forward(进入 - 加载组件(显示) - history.action === "PUSH" 动画前) - 向上平移
.forward-from-bottom-enter {
  z-index: @pageLevel2;
  opacity: 0;
  transform: translateY(100%);
}

// forward(进入 - 加载组件(显示) - history.action === "PUSH", 动画中) - 向上平移
.forward-from-bottom-enter-active {
  z-index: @pageLevel2;
  opacity: 1;
  transform: translateY(0);
  transition: all ease-in @time;
}

// forward(进入 - 卸载组件(隐藏) - history.action === "PUSH", 动画前) - 淡出
.forward-from-bottom-exit {
  z-index: @pageLevel1;
  opacity: 1;
}

// forward(进入 - 卸载组件(隐藏) - history.action === "PUSH", 动画中) - 淡出
.forward-from-bottom-exit-active {
  z-index: @pageLevel1;
  opacity: 0;
  transition: all @time;
}

// back(离开 - 加载组件(显示) - history.action === "POP", 动画前) - 淡入
.back-to-bottom-enter {
  z-index: @pageLevel1;
  opacity: 0;
}

// back(离开 - 加载组件(显示) - history.action === "POP", 动画中) - 淡入
.back-to-bottom-enter-active {
  z-index: @pageLevel1;
  opacity: .5;
  transition: all ease-in @time;
}

.back-to-bottom-enter-done {
  z-index: @pageLevel1;
  opacity: 1;
}

// back(离开 - 加载组件(隐藏) - history.action === "POP", 动画前) - 淡入
.back-to-bottom-exit {
  z-index: @pageLevel2;
  opacity: 1;
  transform: translateY(0);
}

// back(离开 - 加载组件(隐藏) - history.action === "POP", 动画前) - 淡入
.back-to-bottom-exit-active {
  z-index: @pageLevel2;
  opacity: 0;
  transform: translateY(100%);
  transition: all @time;
}




// 
.forward-from-right-enter {
  z-index: @pageLevel2;
  transform: translateX(100%);
  opacity: 0;
}

.forward-from-right-enter-active {
  z-index: @pageLevel2;
  transform: translateX(0);
  opacity: 1;
  transition: all @time;
}

.forward-from-right-exit {
  z-index: @pageLevel1;
  opacity: 1;
}

.forward-from-right-exit-active {
  z-index:@pageLevel1;
  opacity: 0;
  transition: all @time;
}

.back-to-left-enter {
  z-index: @pageLevel1;
  opacity: 0;
}

.back-to-left-enter-active {
  z-index: @pageLevel1;
  opacity: 1;
  transition: all @time;
}

.back-to-left-exit {
  z-index: @pageLevel2;
  opacity: 1;
  transform: translateX(0);
}

.back-to-left-exit-active {
  z-index: @pageLevel2;
  opacity: 0;
  transform: translateX(100%);
  transition: all @time;
}


